<!DOCTYPE html>
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Frutella</title>
    <link href="./assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="./assets/animate.css/animate.min.css" rel="stylesheet" type="text/css">
    <link href="./assets/fontawesome/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="./assets/slick/slick.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css">
    <link href="./assets/css/theme.min.css" rel="stylesheet" type="text/css"></head>
  
  <body class="body">
	  <div id="app">
    <div class="page-loader cube-loader">
      <div class="loader-wrap">
        <div class="loader-1 loader-element"></div>
        <div class="loader-2 loader-element"></div>
        <div class="loader-4 loader-element"></div>
        <div class="loader-3 loader-element"></div>
      </div>
    </div>
<header class="header-colorfull header-horizontal header-over header-view-side">
      <div class="container">
        <nav class="navbar">
          <a class="navbar-brand" href="indextest.html">
            <span class="logo-element-line">
              <span class="logo-icon">
                <span class="svg-content svg-fill-theme" data-svg="./assets/images/svg/logo-part.svg"></span>
              </span>
              <span class="logo-text" style="font-weight:bold">乐淘淘线上购物管理系统</span></span>
          </a>
          <button class="navbar-toggler" type="button">
            <i class="fas fa-bars nav-show"></i>
            <i class="fas fa-times nav-hide"></i>
          </button>
          <div class="navbar-collapse">
            <div class="container">
              <ul class="navbar-nav">
                <li class="nav-item  nav-hover-show-sub">
                  <a class="nav-link" href="nav-link" data-role="nav-toggler" style="font-weight:bold">个人中心
				 
    
                <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
                  <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">相关页面
                    <span class="nav-arrow">
                      <i class="fas fa-chevron-down"></i></span>
                  </a>
                  <ul class="collapse nav">
                    <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
						
					<li class="nav-item nav-item-arrow-down nav-hover-show-sub">
					  <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">我要打卡
					    <span class="nav-arrow">
					      <i class="fas fa-chevron-down"></i></span>
					  </a>
					  <ul class="collapse nav">
					    <li class="nav-item">
					      <a class="nav-link" href="sign.html" style="font-weight:bold">打卡滴滴</a></li>
					  </ul>
					</li>	
						
					<li class="nav-item nav-item-arrow-down nav-hover-show-sub">
					  <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">关于我们
					    <span class="nav-arrow">
					      <i class="fas fa-chevron-down"></i></span>
					  </a>
					  <ul class="collapse nav">
					    <li class="nav-item">
					      <a class="nav-link" href="about-us-alt.html" style="font-weight:bold">"我们"的简介</a></li>
					  </ul>
					</li>
					
					<li class="nav-item nav-item-arrow-down nav-hover-show-sub">
					  <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">盈销情况
					    <span class="nav-arrow">
					      <i class="fas fa-chevron-down"></i></span>
					  </a>
					  <ul class="collapse nav">
					    <li class="nav-item">
					      <a class="nav-link" href="yingxiao.html" style="font-weight:bold">盈销记录</a></li>
					  </ul>
					</li>
					
                    <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
                      <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">推荐好文
                        <span class="nav-arrow">
                          <i class="fas fa-chevron-down"></i></span>
                      </a>
                      <ul class="collapse nav">
                        <li class="nav-item">
                          <a class="nav-link" href="article-sidebar-right.html" style="font-weight:bold">每日推荐</a></li>
                      </ul>
                    </li>
					

					
                    <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
                      <a class="nav-link" href="#" data-role="nav-toggler" style="font-weight:bold">商品管理
                        <span class="nav-arrow">
                          <i class="fas fa-chevron-down"></i></span>
                      </a>
                      <ul class="collapse nav">
                        <li class="nav-item">
                          <a class="nav-link" href="shop-sidebar-right.html"  style="font-weight:bold">总览购买页</a></li>
                        <li class="nav-item">
                          <a class="nav-link" href="#"  style="font-weight:bold">商品介绍页</a></li>
                      </ul>
                    </li>

                  </ul>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="shop-sidebar-right.html" style="font-weight:bold">购物商店</a></li>
                <li class="nav-item">
                  <a class="nav-link" href="blog-alt-sidebar-right.html" style="font-weight:bold">博客列表</a></li>
                <li class="nav-item">
                  <a class="nav-link" href="contact-us.html" style="font-weight:bold">联系我们</a></li>
              </ul>
              <div class="navbar-extra">
                <ul class="actions-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="#">
                      <i class="fas fa-search"></i>
                      <span class="navbar-mobile">&nbsp;&nbsp;淘一下</span></a>
                  </li>
                  <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
                    <a class="nav-link" href="shop-sidebar-right.html" style="font-weight:bold;font-size: 1rem;">购&nbsp;物
                      <span class="nav-arrow">
                        <i class="fas fa-chevron-down"></i></span>
                    </a>
                    <ul class="collapse nav">
                      <li class="nav-item">
                        <a class="nav-link" href="shop-sidebar-right.html" style="font-weight:bold">购&nbsp;物</a></li>
                      <li class="nav-item">
                        <a class="nav-link" href="blog-alt-sidebar-right.html" style="font-weight:bold">博&nbsp;客</a></li>
                    </ul>
                  </li>
                  <li class="nav-item nav-item-arrow-down nav-hover-show-sub">
                    <a class="nav-link" href="#" data-role="nav-toggler"  style="font-weight:bold;font-size: 1rem;">水果
                      <span class="nav-arrow">
                        <i class="fas fa-chevron-down"></i></span>
                    </a>
                    <ul class="collapse nav">
                      <li class="nav-item">
                        <a class="nav-link" href="#">水&nbsp;&nbsp;果</a></li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">水 果 蔬 菜</a></li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">蔬 菜</a></li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="login.html"  style="font-weight:bold;font-size: 1rem;">
                      <i class="fas fa-user"></i>&nbsp;&nbsp;退 出</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="orderList1.html">
                      <i class="fas fa-shopping-bag"></i>
                      <span class="navbar-mobile">&nbsp;&nbsp;Cart</span>
                      <span class="cart-quantity">
                        <span class="badge badge-pill badge-cart">3</span></span>
                    </a>
                  </li>
                </ul>
                <div class="navbar-info">
                  <div class="navbar-info-title">We are the student of</div>
                  <div class="navbar-info-value">C W N U</div></div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </header>
    </header>
     <section class="after-head top-block-page with-back white-curve-after section-white-text">
      <div class="overflow-back bg-theme"></div>
      <div class="content-offs-stick my-5 container">
        <div class="section-solid with-back">
          <div class="full-block">
            <div class="section-back-text">Shop</div>
            <img class="d-none d-lg-block z-index-3" src="./assets/images/content/x/mandarin.png" alt="" data-size="280px" data-at="10%;bottom 35%">
            <img class="d-none d-lg-block z-index-3" src="./assets/images/content/x/kiwi-blur.png" alt="" data-size="137px" data-at="right 5%;35%">
            <img class="d-none d-lg-block z-index-3" src="./assets/images/content/x/shpinat-2.png" alt="" data-size="50px" data-at="65%;0%;-25deg"></div>
          <div class="z-index-4 position-relative text-center">
            <h1 class="section-title">{{commodity.commodityName}}</h1>
            <div class="mt-3">
              <div class="page-breadcrumbs">
                <a class="content-link" href="homepage-1.html">主页</a>
                <span class="mx-2">\</span>
                <a class="content-link" href="shop-sidebar-right.html">商城</a>
                <span class="mx-2">\</span>
                <span>产品详情</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <div class="container" >
      <div class="sidebar-container"> 
        <div class="content">
          <section class="section">
            <div class="entity">
              <div class="grid col-auto row">
                <div class="col-md-6">
                  <div class="entity-image">
                    <img class="w-100" v-bind:src="'./assets/images/content/720x540/'+commodity.commodityImage" alt=""></div>
                </div>
                <div class="col">
                  <h2 class="mb-2 entity-title">{{commodity.commodityName}}</h2>
                  <div class="user-rating mb-1">
                    <span class="rating-item">
                      <i class="fas fa-star"></i>
                    </span>
                    <span class="rating-item">
                      <i class="fas fa-star"></i>
                    </span>
                    <span class="rating-item">
                      <i class="fas fa-star"></i>
                    </span>
                    <span class="rating-item">
                      <i class="fas fa-star"></i>
                    </span>
                    <span class="rating-item">
                      <i class="fas fa-star"></i>
                    </span>
                  </div>
                  <div class="mb-3 entity-price">
                    <span class="entity-price-current">${{commodity.commodityPrice}}</span>
                    <span class="entity-price-old">$25</span></div>
                  <div class="entity-action-btns">
                    <form autocomplete="off">
                      <div class="row grid">
                        <div class="col-auto">
                          <div class="input-view-flat input-gray-shadow input-spin input-group">
                            <input class="form-control" min="1" name="text" type="text" value="1">
                            <span class="input-actions">
                              <span class="input-decrement">
                                <i class="fas fa-minus"></i>
                              </span>
                              <span class="input-increment">
                                <i class="fas fa-plus"></i>
                              </span>
                            </span>
                          </div>
                        </div>
                        <div class="col-auto">
                          <button class="btn btn-theme" type="submit">添加到购物车</button></div>
                      </div>
                    </form>
                  </div>
                  <ul class="mt-4 entity-list">
                    <li>
                      <span class="entity-list-title">产品编码:</span>
                      <span class="entity-list-value">1245</span></li>
                    <li>
                      <span class="entity-list-title">种类:</span>
                      <span class="entity-list-value">
                        <span class="entity-categories">
                          <a href="article-sidebar-right.html">水果</a>,
                          <a href="article-sidebar-right.html">新鲜</a></span>
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="mb-4 entity-body">
                <p>我们的产品不使用杀虫剂、人工肥料或化学品，并且保证不使用人工色素、香料或防腐剂。</p>
              </div>
              <ul class="font-weight-semibold entity-details-list">
                <li>100% 纯天然绿色无污染</li>
                <li>100% 有机食品</li>
                <li>100% 食品检验合格率</li></ul>
              <div class="entity-footer">
                <div class="separator-line mb-3"></div>
                <div class="entity-action-icons">
                  <div class="entity-actions-title">Share:</div>
                  <a class="content-link" href="#">
                    <i class="fab fa-facebook-f" aria-hidden="true"></i>
                  </a>
                  <a class="content-link" href="#">
                    <i class="fab fa-twitter" aria-hidden="true"></i>
                  </a>
                  <a class="content-link" href="#">
                    <i class="fab fa-google-plus-g" aria-hidden="true"></i>
                  </a>
                  <a class="content-link" href="#">
                    <i class="fab fa-pinterest" aria-hidden="true"></i>
                  </a>
                  <a class="content-link" href="#">
                    <i class="fab fa-instagram" aria-hidden="true"></i>
                  </a>
                </div>
              </div>
            </div>
            <div class="section-block">
              <div class="section-head container left">
                <div class="section-head-content">
                  <h2 class="section-title">部分评论</h2></div>
              </div>
              <div class="entity-block entity-hover-shadow">
                <div class="pb-4 entity-content">
                  <div class="side-image entity-header">
                    <div class="entity-image">
                      <img class="mw-100" src="./assets/images/content/100x100/people-1.jpg" alt=""></div>
                    <h5 class="mb-2 entity-title">程序员甲</h5>
                    <div class="entity-date">
                      <span class="text-theme">
                        <i class="fas fa-calendar-alt"></i>
                      </span>&nbsp;&nbsp;&nbsp;07.08.2021, 14:33</div>
                  </div>
                  <p class="entity-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第二次下单了家人们，东西真的很不错，好吃到翘Jiojio。我只能说买它买它买它，快下单家人们！</p>
                  <div class="entity-footer">
                    <div class="entity-actions">
                      <a href="#">
                        <i class="fas fa-reply"></i>&nbsp;&nbsp;转发</a>
                      <a href="#">
                        <i class="fas fa-quote-left"></i>&nbsp;&nbsp;回复</a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="entity-items">
                <div class="entity-block entity-hover-shadow">
                  <div class="pb-4 entity-content">
                    <div class="side-image entity-header">
                      <div class="entity-image">
                        <img class="mw-100" src="./assets/images/content/100x100/people-3.jpg" alt=""></div>
                      <h5 class="mb-2 entity-title">程序员乙</h5>
                      <div class="entity-date">
                        <span class="text-theme">
                          <i class="fas fa-calendar-alt"></i>
                        </span>&nbsp;&nbsp;&nbsp;09.08.2018, 11:27</div>
                    </div>
                    <p class="entity-text">我已经在这个网站上浏览了30个小时啦，下单百遍其义自现，这很好的缓解了我秃头又单身的悲痛啊哈哈哈哈哈</p>
                    <div class="entity-footer">
                      <div class="entity-actions">
                        <a href="#">
                          <i class="fas fa-reply"></i>&nbsp;&nbsp;转发</a>
                        <a href="#">
                          <i class="fas fa-quote-left"></i>&nbsp;&nbsp;评论</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="entity-block entity-hover-shadow">
                <div class="pb-4 entity-content">
                  <div class="side-image entity-header">
                    <div class="entity-image">
                      <img class="mw-100" src="./assets/images/content/100x100/people-2.jpg" alt=""></div>
                    <h5 class="mb-2 entity-title">程序员甲的女票</h5>
                    <div class="entity-date">
                      <span class="text-theme">
                        <i class="fas fa-calendar-alt"></i>
                      </span>&nbsp;&nbsp;&nbsp;11.10.2018, 07:23</div>
                  </div>
                  <p class="entity-text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第一次吃到这样的东西，感觉灵魂都收到了升华，太好吃辣，我直接重获新生，晚上做梦都睡不着了简直是>_<</p>
                  <div class="entity-footer">
                    <div class="entity-actions">
                      <a href="#">
                        <i class="fas fa-reply"></i>&nbsp;&nbsp;转发</a>
                      <a href="#">
                        <i class="fas fa-quote-left"></i>&nbsp;&nbsp;评论</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="section-block">
              <div class="section-head container left">
                <div class="section-head-content">
                  <h2 class="section-title">添加自己的见解</h2></div>
              </div>
              <form autocomplete="off">
                <div class="row grid">
                  <div class="col-12 col-sm-6">
                    <div class="input-view-flat input-gray-shadow form-group">
                      <label class="required">你的用户名</label>
                      <div class="input-group">
                        <input class="form-control" name="name" type="text" placeholder="Name" required="required"></div>
                    </div>
                  </div>
                  <div class="col-12 col-sm-6">
                    <div class="input-view-flat input-gray-shadow form-group">
                      <label class="required">你的邮箱</label>
                      <div class="input-group">
                        <input class="form-control" name="email" type="email" placeholder="Email" required="required"></div>
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="input-view-flat input-gray-shadow form-group">
                      <label class="required">你的宝贵评论</label>
                      <div class="input-group">
                        <textarea class="form-control" name="message" placeholder="Message"></textarea>
                      </div>
                    </div>
                  </div>
                  <div class="col-12">
                    <button class="btn-wide mb-0 btn btn-theme" type="submit">发帖</button></div>
                </div>
              </form>
            </div>
          </section>
        </div>
        <div class="sidebar section order-lg-last">
          <section class="section-sidebar">
            <div class="section-head">
              <h3 class="section-title h4">
                <span>搜一下</span></h3>
            </div>
            <form autocomplete="off">
              <div class="row">
                <div class="col">
                  <div class="input-view-flat input-gray-shadow form-group">
                    <div class="input-group">
                      <input class="form-control" name="search" type="text" placeholder="Keywords" required="required"></div>
                  </div>
                </div>
                <div class="col-auto">
                  <button class="mb-0 btn btn-theme" type="submit">
                    <i class="fas fa-search"></i>
                  </button>
                </div>
              </div>
            </form>
          </section>
          <section class="section-sidebar">
            <div class="section-head">
              <h3 class="section-title h4">
                <span>热卖</span></h3>
            </div>
            <div class="grid row">
              <div class="col-md-6 col-lg-12">
                <article class="entity">
                  <div class="grid-sm row">
                    <div class="col-sm-5">
                      <a class="entity-preview-show-up entity-preview" href="#">
                        <span class="embed-responsive embed-responsive-6by4">
                          <img class="embed-responsive-item" src="./assets/images/content/720x540/tomato.jpg" alt=""></span>
                        <span class="with-back entity-preview-content">
                          <span class="h3 m-auto text-theme text-center">
                            <i class="fas fa-search"></i>
                          </span>
                          <span class="overflow-back bg-body-back opacity-70"></span>
                        </span>
                      </a>
                    </div>
                    <div class="col">
                      <h4 class="h5 mb-1 entity-title">
                        <a class="content-link" href="#">番茄</a></h4>
                      <div class="user-rating">
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                      </div>
                      <div class="entity-price">
                        <span class="currency">$</span>3.29 / kg</div></div>
                  </div>
                </article>
              </div>
              <div class="col-md-6 col-lg-12">
                <article class="entity">
                  <div class="grid-sm row">
                    <div class="col-sm-5">
                      <a class="entity-preview-show-up entity-preview" href="#">
                        <span class="embed-responsive embed-responsive-6by4">
                          <img class="embed-responsive-item" src="./assets/images/content/720x540/blueberry.jpg" alt=""></span>
                        <span class="with-back entity-preview-content">
                          <span class="h3 m-auto text-theme text-center">
                            <i class="fas fa-search"></i>
                          </span>
                          <span class="overflow-back bg-body-back opacity-70"></span>
                        </span>
                      </a>
                    </div>
                    <div class="col">
                      <h4 class="h5 mb-1 entity-title">
                        <a class="content-link" href="#">蓝莓</a></h4>
                      <div class="user-rating">
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                      </div>
                      <div class="entity-price">
                        <span class="currency">$</span>12.50 / kg</div></div>
                  </div>
                </article>
              </div>
              <div class="col-md-6 col-lg-12">
                <article class="entity">
                  <div class="grid-sm row">
                    <div class="col-sm-5">
                      <a class="entity-preview-show-up entity-preview" href="#">
                        <span class="embed-responsive embed-responsive-6by4">
                          <img class="embed-responsive-item" src="./assets/images/content/720x540/orange.jpg" alt=""></span>
                        <span class="with-back entity-preview-content">
                          <span class="h3 m-auto text-theme text-center">
                            <i class="fas fa-search"></i>
                          </span>
                          <span class="overflow-back bg-body-back opacity-70"></span>
                        </span>
                      </a>
                    </div>
                    <div class="col">
                      <h4 class="h5 mb-1 entity-title">
                        <a class="content-link" href="#">橘子</a></h4>
                      <div class="user-rating">
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item">
                          <i class="fas fa-star"></i>
                        </span>
                        <span class="rating-item rating-inactive">
                          <i class="fas fa-star"></i>
                        </span>
                      </div>
                      <div class="entity-price">
                        <span class="currency">$</span>4.99 / kg</div></div>
                  </div>
                </article>
              </div>
            </div>
          </section>
          <section class="section-sidebar">
            <div class="section-head">
              <h3 class="section-title h4">
                <span>评论分类</span></h3>
            </div>
            <ul class="list-unstyled">
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">
                    <i class="fas fa-apple-alt"></i>
                  </span>
                  <span class="record-title">文章评论</span>
                  <span class="record-value">10</span></a>
              </li>
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">
                    <i class="fas fa-apple-alt"></i>
                  </span>
                  <span class="record-title">动态评论</span>
                  <span class="record-value">5</span></a>
              </li>
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">
                    <i class="fas fa-apple-alt"></i>
                  </span>
                  <span class="record-title">自动评论</span>
                  <span class="record-value">3</span></a>
              </li>
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">
                    <i class="fas fa-apple-alt"></i>
                  </span>
                  <span class="record-title">新评论</span>
                  <span class="record-value">27</span></a>
              </li>
            </ul>
          </section>
          <section class="section-sidebar">
            <div class="section-head">
              <h3 class="section-title h4">
                <span>标签</span></h3>
            </div>
            <ul class="list-inline-flex">
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">#</span>
                  <span class="record-title">文章</span></a>
              </li>
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">#</span>
                  <span class="record-title">食物</span></a>
              </li>
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">#</span>
                  <span class="record-title">健康</span></a>
              </li>
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">#</span>
                  <span class="record-title">水果</span></a>
              </li>
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">#</span>
                  <span class="record-title">蔬菜</span></a>
              </li>
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">#</span>
                  <span class="record-title">新鲜</span></a>
              </li>
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">#</span>
                  <span class="record-title">果汁</span></a>
              </li>
              <li>
                <a class="record-line" href="#">
                  <span class="record-icon">#</span>
                  <span class="record-title">商店</span></a>
              </li>
            </ul>
          </section>
          <section class="section-sidebar">
            <div class="section-head">
              <h3 class="section-title h4">
                <span>产品剪影</span></h3>
            </div>
            <div class="grid-sm row">
              <div class="col-md-6 col-xl-4">
                <a class="entity-block" href="#">
                  <span class="entity-preview-show-up entity-preview">
                    <span class="embed-responsive embed-responsive-1by1">
                      <img class="embed-responsive-item" src="./assets/images/content/720x720/image-1.jpg" alt=""></span>
                    <span class="with-back entity-preview-content">
                      <span class="overflow-back bg-body-back opacity-70"></span>
                      <span class="m-auto h1 text-theme text-center">
                        <i class="fab fa-instagram"></i>
                      </span>
                    </span>
                  </span>
                </a>
              </div>
              <div class="col-md-6 col-xl-4">
                <a class="entity-block" href="#">
                  <span class="entity-preview-show-up entity-preview">
                    <span class="embed-responsive embed-responsive-1by1">
                      <img class="embed-responsive-item" src="./assets/images/content/720x720/image-2.jpg" alt=""></span>
                    <span class="with-back entity-preview-content">
                      <span class="overflow-back bg-body-back opacity-70"></span>
                      <span class="m-auto h1 text-theme text-center">
                        <i class="fab fa-instagram"></i>
                      </span>
                    </span>
                  </span>
                </a>
              </div>
              <div class="col-md-6 col-xl-4">
                <a class="entity-block" href="#">
                  <span class="entity-preview-show-up entity-preview">
                    <span class="embed-responsive embed-responsive-1by1">
                      <img class="embed-responsive-item" src="./assets/images/content/720x720/image-3.jpg" alt=""></span>
                    <span class="with-back entity-preview-content">
                      <span class="overflow-back bg-body-back opacity-70"></span>
                      <span class="m-auto h1 text-theme text-center">
                        <i class="fab fa-instagram"></i>
                      </span>
                    </span>
                  </span>
                </a>
              </div>
              <div class="col-md-6 col-xl-4">
                <a class="entity-block" href="#">
                  <span class="entity-preview-show-up entity-preview">
                    <span class="embed-responsive embed-responsive-1by1">
                      <img class="embed-responsive-item" src="./assets/images/content/720x720/image-4.jpg" alt=""></span>
                    <span class="with-back entity-preview-content">
                      <span class="overflow-back bg-body-back opacity-70"></span>
                      <span class="m-auto h1 text-theme text-center">
                        <i class="fab fa-instagram"></i>
                      </span>
                    </span>
                  </span>
                </a>
              </div>
              <div class="col-md-6 col-xl-4">
                <a class="entity-block" href="#">
                  <span class="entity-preview-show-up entity-preview">
                    <span class="embed-responsive embed-responsive-1by1">
                      <img class="embed-responsive-item" src="./assets/images/content/720x720/image-5.jpg" alt=""></span>
                    <span class="with-back entity-preview-content">
                      <span class="overflow-back bg-body-back opacity-70"></span>
                      <span class="m-auto h1 text-theme text-center">
                        <i class="fab fa-instagram"></i>
                      </span>
                    </span>
                  </span>
                </a>
              </div>
              <div class="col-md-6 col-xl-4">
                <a class="entity-block" href="#">
                  <span class="entity-preview-show-up entity-preview">
                    <span class="embed-responsive embed-responsive-1by1">
                      <img class="embed-responsive-item" src="./assets/images/content/720x720/image-6.jpg" alt=""></span>
                    <span class="with-back entity-preview-content">
                      <span class="overflow-back bg-body-back opacity-70"></span>
                      <span class="m-auto h1 text-theme text-center">
                        <i class="fab fa-instagram"></i>
                      </span>
                    </span>
                  </span>
                </a>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
    <div class="scroll-top">
      <i class="fas fa-long-arrow-alt-up"></i>
    </div>
    <footer class="white-curve-before curve-before-80 page-footer footer-view-links section-white-text">
      <div class="overflow-back bg-vegetables-pattern-white opacity-3"></div>
    </footer>
    <script src="./assets/jquery/jquery-3.3.1.min.js"></script>
    <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="./assets/shuffle/shuffle.min.js"></script>
    <script src="./assets/waypoints/jquery.waypoints.min.js"></script>
    <script src="./assets/slick/slick.min.js"></script>
    <script src="./assets/js-cookie/js.cookie.js" type="text/javascript"></script>
    <script src="./assets/js/gmap/silver.js"></script>
    <script src="./assets/js/script.js"></script>
    <script async defer="defer" src="https://ditu.google.cn/maps/api/js?key=AIzaSyBDBAbNXaCDOzujLCykXUvTylfbL1wUcaM&callback=initMap"></script>
  </div>
  </body>
<script src="./assets/js/vue.js"></script>
  <script src="./assets/js/axios.min.js"></script>
  <script src="./assets/js/const.js"></script>
  <script>
  	var config={
  		"el":"#app",
  		"data":{
			"commodityArray":[],
			"commodity":"",
			"commodity_price":"",
			"amount":"",
			"price":"",
			"cost":"",
  		},
  		"methods":{
			selectById:function(id){
				//http://localhost:9092/commodity/selectAll
				var url = baseUrl+"/commodity/selectById?id="+id;
				// console.log(url);
				axios.get(url)
				.then(function(response){
					this.vue.commodity = response.data.data;
					console.log(this.vue.commodityArray);
				})
				.catch();
				
			},
			insertCart:function(){
				window.alert("添加成功");
				console.log("13236547655");
			},
  			"insert":function(){
  				var serverUrl=baseUrl+"/orderlist/insert?amount=1&commodityId=1&commodityName=%E7%8C%95%E7%8C%B4%E6%A1%83"
  				+"?categoryId="+this.categoryId
  				+"&image="+this.image
  				+"&itemDesc="+this.itemDesc
  				+"&name="+this.name
  				+"&price="+this.price;
  				console.log(serverUrl);
  				axios.get(serverUrl)
  				.then(function(response){
  					var serverResult=response.data;
  					var code=serverResult.code;
  					if(code==0){
  						window.alert("添加成功")
  						//更新界面
  						//在then中调用函数，要加this.vue
  						this.vue.selectAllItem();
  					}else{
  						window.alert("添加失败")
  					}
  				})
  				.catch();
  			}
  		},
  		"mounted":function(){
  			// this.selectAllItem();
			//1.从地址栏得到商品编号
				//detail.html?id=5
				var parameter=location.search;//?id=5
				var strArray=parameter.split("=");//0 :id 1:5
				var id=strArray[1];
				//必须从首页从超链接跳转,不能直接运行.
				console.log(id);
			this.selectById(id);
  		}
  	}
  	var vue=new Vue(config);
  </script>
</html>